<template>
  <div>
    <div class="main" v-if="flag2 == 1">
      <el-tabs type="border-card">
        <el-tab-pane label="新增计费项目">
          <el-form
            :inline="true"
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="150px"
            class="demo-ruleForm"
          >
            <el-form-item label="计费项目名称" prop="payname">
              <el-input
                v-model="ruleForm.payname"
                style="width: 480px"
              ></el-input>
            </el-form-item>
            <el-form-item label="项目优先级" prop="paylevel">
              <el-input
                v-model="ruleForm.paylevel"
                style="width: 480px"
              ></el-input>
            </el-form-item>
            <br />
            <el-form-item label="项目用量/时常" prop="paynum">
              <el-input
                v-model="ruleForm.paynum"
                style="width: 480px"
              ></el-input>
            </el-form-item>
            <el-form-item label="项目价格" prop="paymoney">
              <el-input
                v-model="ruleForm.paymoney"
                style="width: 480px"
              ></el-input>
            </el-form-item>

            <el-form-item label="通知状态" prop="paystatus">
              <el-select
                v-model="ruleForm.paystatus"
                placeholder="请选择状态"
                style="width: 480px"
              >
                <el-option label="已通知" :value="1"></el-option>
                <el-option label="未通知" :value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="计费目录" prop="c_id">
              <el-select
                v-model="ruleForm.c_id"
                placeholder="请选择状态"
                style="width: 480px"
              >
                <el-option label="电费目录" :value="7"></el-option>
                <el-option label="水费固定月目录" :value="8"></el-option>
                <el-option label="水费按量目录" :value="9"></el-option>
                <el-option label="天然气目录" :value="10"></el-option>
                <el-option label="物业费目录" :value="11"></el-option>
                <el-option label="宽带费目录" :value="12"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-form-item label="通知内容">
                <div style="width: 1125px">
                  <vue-ueditor-wrap
                    v-model="ruleForm.paycontent"
                    :config="editorConfig"
                    @ready="onEditorReady"
                  />
                </div>
              </el-form-item>
              <div class="buttons">
                <el-button
                  type="primary"
                  @click="resetForm('ruleForm')"
                  style="
                    width: 80px;
                    height: 40px;
                    margin-bottom: 20px;
                    font-size: 16px;
                  "
                  icon="el-icon-caret-left"
                  >返回</el-button
                >
                <el-button
                  v-if="bth"
                  type="primary"
                  @click="submitForm('ruleForm')"
                  style="width: 80px; height: 40px; font-size: 16px; margin-bottom: 20px;"
                  icon="el-icon-folder-checked"
                  :loading="flag3"
                  >保存</el-button
                >
                <el-button
                  v-if="bth"
                  type="primary"
                  @click="submitForm('ruleForm')"
                  style="width: 80px; height: 40px; font-size: 16px"
                  icon="el-icon-s-promotion"
                  :loading="flag3"
                  >提交</el-button
                >
              </div>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="main" v-if="flag2 == 2">
      <el-tabs type="border-card">
        <el-tab-pane label="计费项目查看">
          <div class="table">
            <div>
              计费项目名称 ： <span>{{ grunlist[0].payname }}</span>
            </div>
            <div>
              项目优先级 ： <span>{{ grunlist[0].paylevel }}</span>
            </div>
            <div>
              项目用量时常 ： <span>{{ grunlist[0].paynum }}</span>
            </div>
            <div>
              项目用量时常 ： <span>{{ grunlist[0].paymoney }}</span>
            </div>
            <div>
              通知状态 ：
              <span>{{
                grunlist[0].coststatus == 1 ? "已通知" : "未通知"
              }}</span>
            </div>
            <div>通知人 ： <span v-html="grunlist[0].username"></span></div>
            <div>通知内容 ：<span v-html="grunlist[0].paycontent"></span></div>
          </div>
        </el-tab-pane>
        <div class="buttons">
          <el-button
            type="primary"
            @click="resetForm2()"
            style="
              width: 80px;
              height: 40px;
              margin-bottom: 20px;
              font-size: 16px;
            "
            icon="el-icon-caret-left"
            >返回</el-button
          >
        </div>
      </el-tabs>
    </div>
  </div>
</template>
  
  <script>
import VueUeditorWrap from "vue-ueditor-wrap";
export default {
  components: {
    VueUeditorWrap,
  },
  data() {
    return {
      bth: true,
      grunlist: [
        {
          communityname: "",
          unitname: "",
          unitnum: "",
          unitstatus: "",
          unitcontext: "",
        },
      ],
      flag: true,
      flag2: 1,
      flag3: false,
      ruleForm: {
        coststatus: 2,
        token: sessionStorage.getItem("token"),
      },
      tabeleData: {
        unitcontext: "",
      },
      // 富文本编辑框
      content: "", // 用于绑定编辑器内容
      editorConfig: {
        // UEditor 配置项
        UEDITOR_HOME_URL: "/ueditor/", // 确保路径正确
        serverUrl: "", // 如果需要上传功能，配置服务器端接口地址
        initialFrameWidth: "100%",
        initialFrameHeight: 350,
        autoHeightEnabled: false,
        toolbars: [
          [
            "fullscreen",
            "source",
            "undo",
            "redo",
            "bold",
            "italic",
            "underline",
            "fontborder",
            "strikethrough",
            "superscript",
            "subscript",
            "removeformat",
            "formatmatch",
            "autotypeset",
            "blockquote",
            "pasteplain",
            "|",
            "forecolor",
            "backcolor",
            "insertorderedlist",
            "insertunorderedlist",
            "selectall",
            "|",
            "rowspacingtop",
            "rowspacingbottom",
            "lineheight",
            "|",
            "customstyle",
            "paragraph",
            "fontfamily",
            "fontsize",
            "directionalityltr",
            "directionalityrtl",
            "|",
            "indent",
            "justifyleft",
            "justifycenter",
            "justifyright",
            "justifyjustify",
            "|",
            "touppercase",
            "tolowercase",
            "|",
            "emotion",
            //百度地图
            "map",
            //代码语言
            "insertcode",
            "background",
            "|",
            // 分割线
            "inserttable",
            "deletetable",
            "insertparagraphbeforetable",
            "insertrow",
            "deleterow",
            "insertcol",
            "deletecol",
            "mergecells",
            "mergeright",
            "mergedown",
            "|",
          ],
        ],
      },
      rules: {
        payname: [{ required: true, message: "计费项目不能为空", trigger: "blur" }],
        paylevel: [{ required: true, message: "项目级别不能为空", trigger: "change" }],
        paynum: [
          { required: true, message: "项目用量/时长不能为空", trigger: "blur" },
        ],
        paymoney: [{ required: true, message: "项目价格不能为空", trigger: "change" }],
        paystatus:[{ required: true, message: "通知状态不能为空", trigger: "blur" }],
        c_id:[{ required: true, message: "项目目录不能为空", trigger: "change" }],

      },
    };
  },
  created() {
    this.flag2 = this.$route.query.flag;
    console.log(this.flag2);

    this.getunlist();
  },
  methods: {
    // 监听富文本编辑框事件
    onEditorReady(editor) {
      console.log("编辑器已准备好", editor);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addList();
        } else {
          return false;
        }
      });
    },
    submitForm2() {
      this.flag2 = 1;
      this.ruleForm = this.grunlist[0];
      console.log(this.flag2);
      this.bth = false;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.ruleForm.unitcontext = "";
      // 返回上跳转来的页面
      this.$router.go(-1);
    },
    resetForm2() {
      this.$router.go(-1);
    },
    // 接口
    //保存
    async addList() {
      this.flag = false;
      this.flag3 = true;
      await this.$axios
        .post("/cost/addCostData", {
          ...this.ruleForm,
        })
        .then((res) => {
          console.log(res);
          this.flag = true;
          this.flag3 = false;
          this.resetForm2();
        });
    },
    // id 详情接口
    async getunlist() {
      await this.$axios
        .get("/cost/getCostDetail", {
          params: {
            id: this.$route.query.id,
            token: sessionStorage.getItem("token"),
          },
        })
        .then((res) => {
          // console.log(res);
          this.grunlist = res.data;
          console.log(this.grunlist);
        });
    },
    // 修改
    async submitForm3() {
      await this.$axios.post("/house/updateunitList", {
        ...this.ruleForm,
        u_id: this.$route.query.id,
      });
    },
  },
};
</script>
  
  <style scoped>
.main {
  /* padding-top:60px ; */
}
.buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: fixed;
  right: 2%;
  top: 20%;
}
.el-icon-folder-checked {
  font-size: 16px;
}
.table {
  display: flex;
  flex-direction: column;
}
.table > div {
  margin: 15px;
  text-align: right;
  width: 250px;
  display: flex;
  justify-content: flex-end;
}
.table > div > span {
  width: 50%;
  text-align: left;
}
sup {
  color: red;
}
</style>
  